<!DOCTYPE html>
<!-- 通过 xmlns:th=”http://www.thymeleaf.org“ 命令空间，将静态页面转换为动态的视图，
需要进行动态处理的元素,将使用“th:”前缀。 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员-登录-注册</title>

		<link rel="stylesheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css">
		<script src="webjars/jquery/3.6.0/jquery.js"></script>
		<script src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>

		<link rel="stylesheet" href="css/login-register.css">
		<link rel="stylesheet" href="css/nav.css">
	</head>
	<body>
	    <div class="container">
			<!--菜单导航区域-->
			<div th:replace="nav :: nav"></div>
			
			<!--登录注册导航-->
            <div class="nav">
				<div class="login-register-nav">
					<ul class="nav nav-pills">
					  <li role="presentation" class="active"><a th:href="@{/login.html}" target="contentPage">登录</a></li>
					  <li role="presentation"><a th:href="@{/register.html}" target="contentPage">注册会员</a></li>
					</ul>
				</div>
				
				<div class="" style="height: 500px;">
					<iframe th:src="@{/login.html}" name="contentPage" width="100%" height="100%" frameborder="0" ></iframe>
				</div>
			</div>


			<!--页尾 版本声明区域-->

		</div>
	</body>
</html>

<script>
	$(function(){
		$(".login-register-nav li").click(function(){
			//先将所有的active激活样式删除，仅给当前事件激活
		    $(".login-register-nav li").removeClass("active");
			$(this).addClass("active")
		})
	})
	
</script>
